<script setup>

import router from "@/router/index.js";
import {SuccessFilled} from "@element-plus/icons-vue";

const shop= (val,price) =>{
  router.push({
    path:'/home/zf',
    query:{
      names:val,
      price:price
    }
  })
}
</script>

<template>
<div class="divq">
  <div>
    <el-main class="main">
      <el-card class="el-card">
        <h2 align="center">限量周卡(周付)</h2>
        <p>每7天可用20G高速流量(速度可达：200mbps)
          高速流量用尽后智能限速不断网</p>
        <p align="center">￥<span style="font-size: 30px;color: #01c0f4;font-weight: bold;" >9.9</span> 元/7天</p>
        <div class="divText"><el-text>100+ 全球节点</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <br>
        <div class="divText"><el-text>高效稳定的MPLS全球骨干网</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <br>
        <div class="divText"><el-text>协议支持 Shadowsocks、Trojan</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <br>
        <div class="divText"><el-text>支持iOS、Android、PC、Mac等设备</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <br>
        <div class="divText"><el-text>完善的支持流媒体解锁</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <br>
        <div class="divText"><el-text>允许两个设备同时在线</el-text></div><el-icon style="color: rgba(25,223,53,0.7);font-size: 20px;"><SuccessFilled /></el-icon>
        <p align="center"><el-button type="primary" @click="shop('周卡',9.9)">立即购买</el-button></p>
      </el-card>
      <el-card class="el-cards">
        <h1 align="center">限量周卡(周付)</h1>
        <p>每7天可用20G高速流量(速度可达：200mbps)
          高速流量用尽后智能限速不断网</p>
        <p align="center">￥<span style="font-size: 30px;color: #01c0f4;font-weight: bold;" >9.9</span> 元/7天</p>
        <p class="nei" >
          100+ 全球节点 <el-icon style="color: rgba(25,223,53,0.7); left: 180px"><SuccessFilled /></el-icon><br>
          高效稳定的MPLS全球骨干网 <el-icon style="color: rgba(25,223,53,0.7);left: 85px"><SuccessFilled /></el-icon> <br>
          协议支持 Shadowsocks、Trojan <el-icon style="color: rgba(25,223,53,0.7);left: 55px"><SuccessFilled /></el-icon> <br>
          支持iOS、Android、PC、Mac等设备 <el-icon style="color: rgba(25,223,53,0.7);;left: 20px"><SuccessFilled /></el-icon> <br>
          完善的支持流媒体解锁 <el-icon style="color: rgba(25,223,53,0.7);left: 128px"><SuccessFilled /></el-icon> <br>
          允许两个设备同时在线 <el-icon style="color: rgba(25,223,53,0.7);left: 128px"><SuccessFilled /></el-icon> <br>
        </p>
        <p align="center"><el-button type="primary" @click="shop('周卡',9.9)">立即购买</el-button></p>
      </el-card>
    </el-main>
  </div>
</div>
</template>

<style scoped>
@media screen and (max-width: 600px) {
  /* 在600px及以下宽度的设备上应用的样式 */
  p{
    font-size: 10px;
  }
  h1{
    font-size: 10px;
  }
  .el-card{
    display: none;
    border-radius: 20px;
  }
  .el-cards{
    width: 200px;
    height: 350px;
    display: block;
  }
  .nei{
    line-height: 15px;
  }
}
@media screen and (min-width: 601px) {
  .divText{
    line-height: 30px;
    width: 250px;
    display: inline-block;
  }

  h1{
    font-size: 30px;
  }
  .el-card{
    width: 324px;
    height: 530px;
    border-radius: 20px;
  }
  .nei{
    line-height: 50px;
  }
  .el-cards{
    display: none;
  }
  .main{
    margin: 20px;
    display: flex;
  }
}



</style>